// pages/feedback/index.js
Page({
  data: {
    tabs: [
      {
        id: 0,
        value: "体验问题",
        isActive: true
      },
      {
        id: 1,
        value: "商品、商家投诉",
        isActive: false
      }
    ],
    //被选中的图片路径 数组
    chooseImgs: [],
    //文本域的内容
    textVal: ""
  },
  //外网的图片的路径数组
  UpLoadImgs: [],
  //标题点击事件,从子组件传递过来
  handleTabsItemChange(e) {
    console.log(e);
    //1.获取被点击的标题索引
    const { index } = e.detail
    //2.修改原数组
    let { tabs } = this.data
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    //3.赋值到data中
    this.setData({
      tabs
    })
  },
  //点击 + 选择图片
  handleChooseImg() {
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (result) => {
        console.log(result);
        this.setData({
          //避免数组进行重置，这里对图片数组进行拼接
          chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
        })
      },
      fail: () => { },
      complete: () => { }
    });

  },
  //点击自定义图片组件
  handleRemoveImg(e) {
    //1.获取被点击的组件的索引
    const { index } = e.currentTarget.dataset;
    //2.获取data中的图片数组
    let { chooseImgs } = this.data;
    //3.删除元素
    chooseImgs.splice(index, 1);
    this.setData({
      chooseImgs
    })
  },
  //文本域输入的事件
  handleTextIuput(e) {
    this.setData({
      textVal: e.detail.value
    })

  },
  //提交按钮的点击事件
  handleFormSubmit() {
    //1.获取文本域的内容
    const { textVal, chooseImgs } = this.data;
    //2.合法性的验证
    if (!textVal.trim()) {
      //说明输入不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true,
      });
      return;
    }
    //3.准备上传图片到专门的服务器
    // 上传文件的api不支持多个文件同时上传，遍历数组  逐个上传
    //显示正在等待中
    wx.showLoading({
      title: "正在上传中...",
      mask: true,

    });

    // 判断有没有要上传的图片数组
    if (chooseImgs.length != 0) {

      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          //图片要上传到哪里,比如新浪图床
          url: 'https://www.picb.cc/yingzi/albums',
          //被上传的文件的路径
          filePath: v,
          //上传的文件的名称，方便后台来获取文件 file
          name: "file",
          //顺带的文本信息
          formData: {},
          success: (result) => {
            console.log(result);
            let url = JSON.parse(result.data).url;
            this.UpLoadImgs.push(url);
            // console.log(this.UpLoadImgs);
            //所有图片上传完之后才触发，
            if (i === chooseImgs.length - 1) {
              //弹窗关闭
              wx.hideLoading();
              //
              console.log("把文本的内容和外网的图片数组都提交到后台中");
              //提交都成功了
              //重置页面
              this.setData({
                textVal: "",
                chooseImgs: []
              })
              //返回上一个页面
              wx.navigateBack({
                delta: 1
              });

            }
          }
        });
      })
    } else {
      wx.hideLoading();
      console.log("只是上传了文本");
      wx.navigateBack({
        delta: 1
      })
    }
  }
})